<template>
  <div class="home-container">
    <el-container>
  <el-header class="home-header">
    <span class="home-header-title">后台管理系统</span>
  </el-header>
  <el-main>
    <el-row class="home-content-box">
    <el-col :span="6" class="content-meau-box">
      <el-menu
      default-active="2"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b">
      <el-menu-item index="1">
        <i class="el-icon-setting"></i>
        <span slot="title">导航四</span>
      </el-menu-item>
      <el-menu-item index="2">
        <i class="el-icon-setting"></i>
        <span slot="title">导航四</span>
      </el-menu-item>
      <el-menu-item index="3">
        <i class="el-icon-setting"></i>
        <span slot="title">导航四</span>
      </el-menu-item>
      <el-menu-item index="4">
        <i class="el-icon-setting"></i>
        <span slot="title">导航四</span>
      </el-menu-item>
    </el-menu>
  </el-col>
  <el-col class="home-content" :span="18">
    <div>

    </div>
  </el-col>
    </el-row>
  </el-main>
</el-container>
  
    <!-- <router-view></router-view> -->
  </div>
</template>

<script>
export default {
  data() {
    return {}
  },
  created() {
    //
  },
  methods: {
    handleClose () {

    },
    handleOpen() {

    },
    testReq() {
      this.$ajax({
        url: this.$ajax.setUrl(`https://blog.csdn.net/weixin_52890961/article/details/116267617/${1234}`),
        methods: 'get',
        params: this.$ajax.setParams()
      }).then(({ data }) => {
        if (data && data.code === '0') {
          ///
        } else {
          this.$message.error(data.data || data.msg)
        }
      })
    },
    goLogin() {
      this.$router.push({ name: 'manage-edit' })
    }
  }
}
</script>

<style lang="scss">
#app {
  width: 100%;
  height: 100%;
  .home-container {
    width: 100%;
    height: 100%;
    .el-container {
      width: 100%;
      height: 100%;
    }
  }
}
.el-main {
  padding: 0px !important;
}
.el-menu {
  border-right: 0px;
}
.home-header {
  background-color: rgb(84, 92, 100);
  .home-header-title {
    line-height: 60px;
    height: 60px;
    color: #fff;
    font-size: large;
    font-weight: 700;
  }
}
.home-content-box {
  width: 100%;
  height: 100%;
  display: flex;
  .home-content  {
    // border: 1px solid black;
    height: 100%;
    height: 100%;
    background-color: rgb(213, 219, 225);
    > div {
      margin: 20px;
      height: 95%;
      background: #fff;
      border-radius: 10px;
    }
  }
  .content-meau-box {
    background-color:  rgb(84, 92, 100);
  }
  .home-content-menu {
    display: flex;
    flex: 1;
    flex-direction: row;
    // border: 1px solid black;
    // background-color: rgb(84, 92, 100);
  }

}


</style>
